import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:material_collection_app/widget/common/round_checkbox.dart';
import 'package:material_collection_app/widget/common/top_bar.dart';
import '../utils/utils.dart';

class ApprovalPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State<ApprovalPage> {
  @override
  void initState() {
    super.initState();
  }

  bool _radioSelected = false;

  Widget _buildButton(title, color, [double right = 20, type]) {
    return Container(
      margin: EdgeInsets.only(right: right.w),
      child: SizedBox(
        height: 60.w,
        child: ElevatedButton(
          onPressed: () {
            if (type == 'opinion') {
              this.showMaterialInfoDialog();
            }
          },
          child: Text(
            title,
            style: TextStyle(color: Utils.hexToColor(color), fontSize: 14),
          ),
          style: ElevatedButton.styleFrom(
            backgroundColor: Utils.hexToColor('#F5F3F3'),
            padding: EdgeInsets.fromLTRB(33.w, 0, 33.w, 0),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(60.w))),
          ),
        ),
      ),
    );
  }

  bool _switchSelected = true;

  Widget _buildPageTwo() {
    return Container(
        color: Utils.hexToColor('#F5F6FA'),
        child: Column(mainAxisAlignment: MainAxisAlignment.start, children: <
            Widget>[
          Expanded(
              flex: 1,
              child: ListView.builder(
                  itemCount: 15,
                  padding: EdgeInsets.only(bottom: 200.w),
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(
                        onTap: () {},
                        child: Container(
                            width: 700.w,
                            height: 315.w,
                            margin: EdgeInsets.fromLTRB(25.w, 20.w, 25.w, 0),
                            padding: EdgeInsets.fromLTRB(24.w, 0, 24.w, 0.w),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(20.w),
                            ),
                            child: Row(children: <Widget>[
                              RoundCheckBox(
                                select: _radioSelected,
                                onChanged: () {
                                  setState(() {
                                    _radioSelected = !_radioSelected;
                                  });
                                },
                              ),
                              Container(
                                  width: 580.w,
                                  margin: EdgeInsets.only(left: 20.w),
                                  child: Column(children: <Widget>[
                                    Container(
                                      height: 90.w,
                                      decoration: BoxDecoration(
                                          border: Border(
                                              bottom: BorderSide(
                                                  color: Utils.hexToColor(
                                                      '#EEEEEE')))),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          Text('RFID号：01-12-52',
                                              style: TextStyle(
                                                  color: Utils.hexToColor(
                                                      '#666666'),
                                                  fontSize: 14)),
                                          Container(
                                            margin: EdgeInsets.only(right: 0.w),
                                            child: Switch(
                                                value: _switchSelected,
                                                activeColor:
                                                    Utils.hexToColor('#FFFFFF'),
                                                activeTrackColor:
                                                    Utils.hexToColor('#297CFF'),
                                                inactiveTrackColor:
                                                    Utils.hexToColor('#FB6361'),
                                                onChanged: (value) {
                                                  setState(() {
                                                    _switchSelected = value;
                                                  });
                                                }),
                                          )
                                        ],
                                      ),
                                    ),
                                    Container(
                                        alignment: Alignment.topLeft,
                                        padding:
                                            EdgeInsets.fromLTRB(0, 0, 0, 34.w),
                                        child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: <Widget>[
                                              Stack(children: <Widget>[
                                                Column(
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start, // 左对齐
                                                    children: <Widget>[
                                                      Container(
                                                        margin: EdgeInsets.only(
                                                            top: 34.w),
                                                        child: Text('华为手机',
                                                            style: TextStyle(
                                                                color: Color(
                                                                    0xFF333333),
                                                                fontSize: 15,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .bold,
                                                                height: 1)),
                                                      ),
                                                      Container(
                                                        margin: EdgeInsets.only(
                                                            top: 23.w),
                                                        child: Text('物资分类：电子产品',
                                                            style: TextStyle(
                                                                color: Color(
                                                                    0xFF666666),
                                                                fontSize: 12,
                                                                height: 1)),
                                                      ),
                                                      Row(
                                                        children: <Widget>[
                                                          Container(
                                                            width: 250.w,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    top: 13.w),
                                                            child: Text(
                                                                '物资数量：20',
                                                                maxLines: 1,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                style: TextStyle(
                                                                    color: Color(
                                                                        0xFF666666),
                                                                    fontSize:
                                                                        12,
                                                                    height: 1)),
                                                          ),
                                                          Container(
                                                            width: 300.w,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    left: 30.w,
                                                                    top: 13.w),
                                                            child: Text(
                                                                '所属仓库：仓库大楼',
                                                                maxLines: 1,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                style: TextStyle(
                                                                    color: Color(
                                                                        0xFF666666),
                                                                    fontSize:
                                                                        12,
                                                                    height: 1)),
                                                          ),
                                                        ],
                                                      ),
                                                      Row(
                                                        children: <Widget>[
                                                          Container(
                                                            width: 250.w,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    top: 13.w),
                                                            child: Text(
                                                                '推荐库区：B库区',
                                                                maxLines: 1,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                style: TextStyle(
                                                                    color: Color(
                                                                        0xFF666666),
                                                                    fontSize:
                                                                        12,
                                                                    height: 1)),
                                                          ),
                                                          Container(
                                                            width: 300.w,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    left: 30.w,
                                                                    top: 13.w),
                                                            child: Text(
                                                                '所属库位：- -',
                                                                maxLines: 1,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                style: TextStyle(
                                                                    color: Color(
                                                                        0xFF666666),
                                                                    fontSize:
                                                                        12,
                                                                    height: 1)),
                                                          ),
                                                        ],
                                                      )
                                                    ])
                                              ])
                                            ]))
                                  ]))
                            ])));
                  }))
        ]));
  }

  Widget _buildInput(title) {
    return Container(
      margin: EdgeInsets.only(bottom: 20.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 160.w,
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(top: 20.w),
            child: Text(
              title + '：',
              // textAlign: TextAlign.end,
              style:
                  TextStyle(color: Utils.hexToColor('#999999'), fontSize: 14),
            ),
          ),
          Container(
            width: 460.w,
            height: 200.h,
            child: TextField(
              keyboardType: TextInputType.multiline,
              maxLines: 20, //不限制行数
              style: TextStyle(fontSize: 14, color: Colors.black), //输入文本的样式
              decoration: InputDecoration(
                // hintText: "请输入" + title,
                hintStyle: TextStyle(color: Color(0xFFC8C8D9), fontSize: 14),
                contentPadding: EdgeInsets.all(20.w),
                fillColor: Colors.white,
                filled: true,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8.w),
                  ),
                  borderSide: BorderSide(
                    color: Utils.hexToColor('#D4D4D4'),
                    width: 1,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Utils.hexToColor('#D4D4D4'),
                    width: 1,
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(8.w),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<void> showMaterialInfoDialog() async {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return Dialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12.w))),
              insetPadding: EdgeInsets.all(0),
              child: Container(
                  width: 700.w,
                  height: 540.w,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(100))),
                  child: Column(
                    children: <Widget>[
                      _buildDialogHead('填写审批意见'),
                      Expanded(
                          flex: 1,
                          child: SingleChildScrollView(
                            child: Container(
                              padding: EdgeInsets.all(40.w),
                              child: Column(
                                children: <Widget>[
                                  _buildInput('审批意见'),
                                ],
                              ),
                            ),
                          )),
                      Container(
                        height: 120.w,
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(bottom: 22.w),
                        child: SizedBox(
                          width: 380.w,
                          height: 76.w,
                          child: ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text(
                              '保存',
                              style: TextStyle(color: Colors.white),
                            ),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF297CFF),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(60.w))),
                            ),
                          ),
                        ),
                      ),
                    ],
                  )));
        });
  }

  Widget _buildDialogHead(title) {
    return Container(
      height: 80.w,
      decoration: BoxDecoration(
          color: Utils.hexToColor('#F7F7F7'),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12.w), topRight: Radius.circular(12.w))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 31.w),
            child: Text(title,
                style: TextStyle(
                    color: Utils.hexToColor('#333333'),
                    fontSize: 16,
                    fontWeight: FontWeight.bold)),
          ),
          InkWell(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              padding: EdgeInsets.fromLTRB(30.w, 24.w, 30.w, 24.w),
              alignment: Alignment.topRight,
              child: Image.asset(
                'assets/dialog_close.png',
                width: 36.w,
              ),
            ),
          )
        ],
      ),
    );
  }

  Future<void> showSubmitDialog() async {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return Dialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12.w))),
              insetPadding: EdgeInsets.all(0),
              child: Container(
                  width: 660.w,
                  height: 400.w,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(100))),
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(top: 80.w),
                            child: Text('已提交给信息组',
                                style: TextStyle(
                                    color: Utils.hexToColor('#333333'),
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold)),
                          ),
                          Container(
                              margin: EdgeInsets.only(top: 20.w),
                              child: Text('物资出库完成，查看进度请点击订单详情',
                                  style: TextStyle(
                                      color: Utils.hexToColor('#999999'),
                                      fontSize: 12))),
                        ],
                      ),
                      Container(
                        height: 120.w,
                        margin: EdgeInsets.only(top: 70.w),
                        alignment: Alignment.center,
                        child: SizedBox(
                          width: 380.w,
                          height: 76.w,
                          child: ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text(
                              '我知道了',
                              style: TextStyle(color: Colors.white),
                            ),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Color(0xFF297CFF),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(60.w))),
                            ),
                          ),
                        ),
                      ),
                    ],
                  )));
        });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);

    return Scaffold(
        appBar: TopBar(
          title: "审批",
          actions: <Widget>[
            InkWell(
              onTap: () {
                setState(() {
                  _radioSelected = !_radioSelected;
                });
              },
              child: Container(
                alignment: Alignment.center,
                height: double.infinity,
                padding: EdgeInsets.symmetric(horizontal: 31.w),
                child: Text('全选'),
              ),
            )
          ],
        ),
        body: SafeArea(
          child: Container(
            child: Column(children: <Widget>[
              Container(
                height: 108.w,
                padding: EdgeInsets.all(24.w),
                color: Utils.hexToColor('#297CFF'),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        _buildButton('同意', '#409EFF'),
                        _buildButton('拒绝', '#FF9232'),
                      ],
                    ),
                    _buildButton('填写审批意见', '#00AB9D', 0, 'opinion'),
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Stack(
                  children: <Widget>[
                    _buildPageTwo(),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        width: 690.w,
                        height: 140.w,
                        margin: EdgeInsets.only(bottom: 30.w),
                        // color: Utils.hexToColor('#F5F6FA'),
                        child: Stack(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                // margin: EdgeInsets.only(top: 70.w),
                                child: SizedBox(
                                  width: 345.w,
                                  height: 106.w,
                                  child: ElevatedButton(
                                    onPressed: () {
                                      this.showSubmitDialog();
                                    },
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Container(
                                            child: Image.asset(
                                                'assets/submit.png',
                                                width: 25.w)),
                                        Container(
                                          margin: EdgeInsets.only(left: 16.w),
                                          child: Text(
                                            '同意',
                                            style:
                                                TextStyle(color: Colors.white),
                                          ),
                                        )
                                      ],
                                    ),
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: Color(0xFF297CFF),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.horizontal(
                                            left:
                                                Radius.elliptical(60.w, 60.w)),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: Container(
                                // margin: EdgeInsets.only(top: 70.w),
                                child: SizedBox(
                                  width: 345.w,
                                  height: 106.w,
                                  child: ElevatedButton(
                                    onPressed: () {
                                      this.showSubmitDialog();
                                    },
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Container(
                                            margin: EdgeInsets.only(left: 30.w),
                                            child: Image.asset(
                                                'assets/save.png',
                                                width: 25.w)),
                                        Container(
                                          margin: EdgeInsets.only(left: 16.w),
                                          child: Text(
                                            '拒绝',
                                            style:
                                                TextStyle(color: Colors.white),
                                          ),
                                        )
                                      ],
                                    ),
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: Color(0xFF297CFF),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.horizontal(
                                            right:
                                                Radius.elliptical(60.w, 60.w)),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Center(
                              child: Container(
                                width: 3.w,
                                height: 40.w,
                                color: Utils.hexToColor('#7EB1FF'),
                              ),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ]),
          ),
        ));
  }
}
